<template>
  <div>
    <avatarItem>
      <div class="avatar-frame">
        <div
          class="avatar-frame__avatar"
          :style="{
          background: avatarObj.color,
        }"
        >
          {{avatarObj.name[1]}}
        </div>
        <div class="avatar-frame__collective">
          <div class="avatar-frame__title">
            <span class="avatar-frame__name">一样一样</span>
            <span class="principal">@负责人</span>
          </div>
          <div class="avatar-frame__tag">
            <span class="tag">决策</span>
            <span class="tag">决策</span>
          </div>
        </div>
        <i class="el-icon-more avatar-frame__more"></i>
      </div>
      <template #right>
        <div style="display:flex;height:100px;">
          <div style="height:100%;background-color:#111;">
            csss
          </div>
          <div style="height:100%;background-color:#999;">
            csssssssssssss
          </div>
          <div style="height:100%;background-color:#555;">
            csss
          </div>
        </div>
      </template >
    </avatarItem>
  </div>
</template>

<script>
import avatarItem from './avatar-item'
import ddAvatar from './avatar'
export default {
  name: 'group-item',
  components: {
    avatarItem
  },
  computed: {
    avatarObj () {
      return ddAvatar.getAvatar('叶岳林')
    }
  }
}
</script>

<style scoped>
.avatar-frame{
  position: relative;
  display:flex;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  color: #323233;
  background-color: #fff;
  padding: 12px;
}
.avatar-frame__avatar{
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}

.avatar-frame__collective{
  display: flex;
  flex-direction: column;
  margin-left: 12px;
  max-width: 80%;
}
.avatar-frame__title{
  display: flex;
}
.avatar-frame__name{
  font-size: 16px;
  color:#222222;
  font-weight: bold;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: auto;
}
.avatar-frame__title .principal{
  flex: none;
  line-height: 20px;
  font-size: 10px;
  font-weight: normal;
  color:#FF8E3D;
  margin-left: 8px;
}
.avatar-frame__more{
  position: absolute;
  line-height: 60px;
  top: 0;
  right: 20px;
  color:#DDDDDD;
  transform: rotate(90deg);
}
.avatar-frame__tag{
  display: flex;
  align-items: flex-end;
}
.avatar-frame__tag .tag{
  font-size:12px;
  color:#999999;
}
.avatar-frame__tag .tag:after{
  content: "|";
  margin: 0 2px;
}
.avatar-frame__tag .tag:last-child:after{
  content: "";
}
</style>
